<template>
  <q-layout view="hHh lpR fFf" class="bg-white">

    <layout-header @handleLeftDrawer="handleMenu"/>

    <div ref="leftDrawer" class="left-drawer" :class="{fixed: showMenu}">
      <menus v-show="showMenu"></menus>
      <schrodinger></schrodinger>
    </div>

    <q-page-container class="container row q-pa-none q-ma-none" @scroll="handleScroll" @mouseenter="handleBlur">
      <div class="left">
        <!-- placehoder -->
      </div>
      <div class="middle">
        <slot name="page"></slot>
      </div>
      <div class="right">
        <div class="q-my-sm shadow" v-if="adsShow" style="height:200px">ADS here</div>
        <div class="q-my-sm shadow" style="">
          <slot name="control"></slot>
        </div>
        <div class="q-my-sm shadow" style="">
          <slot name="topics"></slot>
        </div>
        <div class="q-my-sm shadow" style="">
          <slot name="newest"></slot>
        </div>
        <div class="q-my-sm shadow" style="">
          <slot name="statistics"></slot>
        </div>
        <!-- <div class="bg-white q-my-sm" style="height:200px">TRENDING STORIES</div> -->
        <!-- <div class="bg-white q-my-sm" style="height:200px">TRENDING PRODUCTS</div> -->
      </div>
    </q-page-container>
    <div class="footer" v-show="showFooterAds">
      <slot name="footer"></slot>
    </div>
  </q-layout>
</template>

<script>
import Schrodinger from 'src/components/Schrodinger.vue'
import Menus from 'src/components/tree/Menus.vue'
import { defineComponent } from 'vue'
import LayoutHeader from './LayhoutHeader.vue'

export default defineComponent({
  name: 'KmLayout',
  components: {
    LayoutHeader,
    Menus,
    Schrodinger
  },
  data () {
    return {
      adsShow: false,
      keywords: '',
      menuFilter: '',
      showMenu: false,
      lastEmit: Date.now(),
      width: 0,
      showFooterAds: true
    }
  },
  props: {
    leftDrawer: Boolean
  },
  mounted () {
    this.width = document.documentElement.clientWidth
    if (this.width >= 960) {
      this.showMenu = true
    }
    // 隐藏广告
    setTimeout(() => {
      this.showFooterAds = false
    }, 3000)
  },
  methods: {
    // async logout() {
    //   await iUser.logout()
    //   await this.$store.dispatch('initUserInfo')
    //   await this.$router.push({name: 'Login'})
    // },
    async handleBlur () {
      if (this.width < 960) {
        this.showMenu = false
      }
    },
    async handleScroll () {
      console.log('scroll')
      if (Date.now() - this.lastEmit > 1000) {
        this.$emit('emit')
        this.$emit('scroll')
        this.lastEmit = Date.now()
      }
    },
    handleSearch () {
      console.log('handleSearch')
    },
    handleMenu () {
      console.log('handleMenu')
      this.showMenu = !this.showMenu
      // console.log(this.$refs.left)
      // if (this.$refs.left.style === 'display:none' || this.$refs.left.style === '') {
      //   this.$refs.left.stye = 'display:block'
      // } else {
      //   this.$refs.left.stye = 'display:none'
      // }
    }
  }
})
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

.container {
  background-color: $article;
  height: 850px;
  overflow-y: scroll;

  .left {
    margin: 0;
    width: 300px;
    margin-right: calc((100% - 640px) / 2 - 300px);
  }

  .middle {
    padding: 0;
    padding-top: 10px;
    // margin-right: calc((100% - 640px) / 2 - 300px);
    width: 640px;
  }

  .right {
    // padding-left: calc((100% - 640px) / 2 - 300px);
    margin-left: calc((100% - 640px) / 2 - 300px);
    width: 300px;

    .shadow {
      border-radius: 1px;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    }
  }
}

@media screen and (max-width: 1260px) {
  // 300+640+300=1240
  .container {
    padding: 0;

    .left {
      width: 300px;
      margin-right: calc((100% - 940px) / 2);
    }

    .right {
      display: none;
    }
  }
}

@media screen and (max-width: 960px) {
  .container {
    padding: calc((100% - 640px) / 2);
  }
  .right {
    display: none;
  }
  .left {
    display: none;
  }
}

@media screen and (max-width: 672px) {
  .container {
    padding: 16px;
  }
  .right {
    display: none;
  }
  .left {
    display: none;
  }
}

.left-drawer {
  background-color: #f8f9fa;
  width: 300px;
  height: 100%;
  overflow-y: auto;
}

.fixed {
  position: fixed;
  left: 0;
  top: 50px;
}
</style>
